<template>
  <!-- roleset 角色设置 -->
  <div>
    <el-table v-loading="loading" element-loading-text="正在加载中" :data="rolelist">
      <el-table-column label="序号" width="80" align="center" type="index" />

      <el-table-column label="角色名称" width="200" highlight-current-row="true" align="center" prop="id">
        <template v-slot="{ row }">
          <el-input v-if="row.isEdit" v-model="row.name" size="mini" />
          <span v-else>{{ row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="角色状态" width="200" align="center" prop="state">
        <template v-slot="{ row }">
          <el-switch v-if="row.isEdit" v-model="row.state" :active-value="1" :inactive-value="0" />
          <span v-else> {{ row.status === "1" ? "停用" : row.status === "0" ? "正常" : "无" }} </span>
        </template>
      </el-table-column>

      <el-table-column label="备注" align="center" width="200" prop="description">
        <template v-slot="{ row }">
          <el-input v-if="row.isEdit" v-model="row.remark" type="textrea" />
          <span v-else>{{ row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="250">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ formatDate(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" width="250">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ formatDate(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" min-width="250" fixed="right">
        <template v-slot="{ row }">
          <template v-if="row.isEdit">
            <el-button size="mini" type="primary" plain @click="btnEditOK(row)">确认</el-button>
            <el-button size="mini" type="text" @click="row.isEdit = false;">取消</el-button>
          </template>
          <template v-else>
            <el-button size="mini" type="primary" plain @click="btnPermission(row)">分配权限</el-button>

            <el-button size="mini" type="primary" @click="bt(row)">编辑</el-button>

            <el-popconfirm title="确定停用该角色吗？" @onConfirm="deleteRow(row.id)">

              <el-button slot="reference" size="mini" type="danger" style="margin-left: 10px;">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
      <template v-slot:empty>
        <div style="height: 200px;">
          <img src="../../assets/nodata.png" width="150" style="margin: 30px;">
        </div>
      </template>
    </el-table>

    <!-- 分配权限弹层 树形组件 -->
    <el-dialog :visible.sync="showPermissionDialog" title="分配权限">
      <el-tree ref="treeRef" :data="data" show-checkbox :default-checked-keys="defauleKeys" node-key="id" />
      <!-- 更改权限 确认取消 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="btnPermissionOK">确定</el-button>
          <el-button size="mini" @click="btnPermissionCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleAll, ChangeRole, deleteRole, updateRole } from '@/api/role'
// import { getRouterAll, getPermsAll } from '@/api/permissions'
import { getPermsById, changePermsById } from '@/api/permissions'
import { formatDate } from '@/utils/index.js'

export default {
  data() {
    return {
      rolelist: [],
      roleData: {
        name: '',
        description: '',
        status: ''

      },
      perms: [], // 按钮级别权限
      roleitem: [], // 页面级别权限
      combinedArray: [],
      showPermissionDialog: false,
      loading: true,
      defauleKeys: '', // 基础权限
      themId: '',
      data: [
       {
        id: 48,
        label: '资源管理',
        children: [{
  
          id: 36,
          label: '查看当前用户管理的主机列表',
          children: [{
            id: 17,
            label: '获取所有hostname列表'
          }, {
            id: 22,
            label: '获取当前用户所管理主机的cpu数据'
          }, {
            id: 23,
            label: '获取当前用户所管理主机的储存空间数据'
          }, {
            id: 24,
            label: '获取当前用户所管理主机的内存数据'
          }, {
            id: 25,
            label: '获取当前用户所管理主机的网络数据'
          }, {
            id: 26,
            label: '获取当前用户所管理主机的进程数据'
          }]
        }, {

          id: 65,
          label: '数据库查询',
          children: [{
            id: 62,
            label: '增加数据库连接'
          }, {
            id: 63,
            label: '删除数据库连接'
          }, {
            id: 64,
            label: '修改数据库链接'
          }]
        }, {

          id: 66,
          label: '进程管理（查询）'
        }]
      }, {
        id: 50,
        label: '运维管理',
        children: [{
          id: 3,
          label: '值班信息查询',
          children: [{
            id: 4,
            label: '按钮权限-增加值班信息'
          }, {
            id: 5,
            label: '按钮权限-修改值班信息'
          }, {
            id: 6,
            label: '按钮权限-删除值班信息'
          }]
        }, {
          id: 27,
          label: '巡检记录查询',
          children: [{
            id: 29,
            label: '按钮权限-增加巡检记录'
          }, {
            id: 28,
            label: '按钮权限-修改巡检记录'
          }, {
            id: 30,
            label: '按钮权限-删除巡检记录'
          }]
        }, {

          id: 12,
          label: '工单管理（查询当前用户所管理主机的所有故障记录）',
          children: [{
            id: 11,
            label: '查询所有故障记录'
          }, {
            id: 13,
            label: '查询当前用户所管理主机解决/未解决的故障记录'
          }, {
            id: 14,
            label: '添加一条故障记录'
          }, {
            id: 15,
            label: '修改一条故障记录'
          }, {
            id: 16,
            label: '删除一条故障记录'
          }]
        }, {
          id: 58,
          label: '日志记录查询',
          children: [{
            id: 59,
            label: '按钮权限-增加日志记录'
          }, {
            id: 60,
            label: '按钮权限-修改日志记录'
          }, {
            id: 61,
            label: '按钮权限-删除日志记录'
          }]
        }]
      }, {
        id: 53,
        label: '报警管理',
        children: [{
          id: 1,
          label: '查询告警邮箱配置'
        }, {
          id: 7,
          label: '查询告警邮件内容'
        }, {
          id: 8,
          label: '添加一条邮件配置'
        }, {
          id: 9,
          label: '修改一条邮件配置'
        }, {
          id: 10,
          label: '删除一条邮件配置'
        }]
      }, {
        id: 49,
        label: '公告通知',
        children: [{
          id: 54,
          label: '按钮权限-查询公告通知'
        }, {
          id: 55,
          label: '按钮权限-增加公告通知'
        }, {
          id: 56,
          label: '按钮权限-修改公告通知'
        }, {
          id: 57,
          label: '按钮权限-删除公告通知'
        }]
      }, {
        id: 52,
        label: '用户管理',
        children: [{

          id: 32,
          label: '查询角色设置',
          children: [{
            id: 47,
            label: '分配主机'
          }, {
            id: 2,
            label: '查询所有perms列表'
          }, {
            id: 18,
            label: '查询所有role列表'
          }, {
            id: 31,
            label: '修改角色所拥有的权限'
          }, {
            id: 33,
            label: '添加一个新的角色'
          }, {
            id: 34,
            label: '修改角色信息'
          }, {
            id: 35,
            label: '删除角色'
          }]
        }, {
          id: 42,
          label: '查看所有用户信息',
          children: [{
            id: 43,
            label: '修改用户信息'
          }, {
            id: 44,
            label: '停用用户'
          }, {
            id: 45,
            label: '删除用户'
          }, {
            id: 46,
            label: '修改用户角色'
          }]
        }]
      }, {
        id: 51,
        label: '个人中心',
        children: [{
            id: 41,
            label: '用户信息查询（个人）'
          }]
       },
       {
        id: 72,
        label: '数字孪生'
       }]

    }
  },
  mounted() {
    this.getRoleAll()
  },
  methods: {
    formatDate,
    /**
     * 获取全部角色
     */
    async getRoleAll() {
      const res = await getRoleAll()
      console.log('全部角色：', res)
      this.rolelist = res.map(item => {
        return { ...item, isEdit: false }
      })
      this.loading = false
    },
    /**
     * 编辑角色
     */
    bt(row) {
      // 改变行的编辑状态
      row.isEdit = true
    },
    async btnEditOK(row) {
      console.log('提交角色信息：', row)
      row.isEdit = false
      // eslint-disable-next-line no-unused-vars
      const { createTime, updateTime, ...rest } = row
      // TODO 提交修改
      await ChangeRole(rest)
      this.$message({
        type: 'success',
        message: '编辑成功'
      })
    },

    /**
     * 分配权限
     */
    // 获取路由权限权限
    // async getRouterAll() {
    //   const res = await getRouterAll()
    //   this.roleitem = res.map(item => item.role)
    //   console.log('页面权限', this.roleitem)
    // },
    // // 获取按钮权限
    // async getPermsAll() {
    //   const res = await getPermsAll()
    //   // this.roleitem = res.map(item => item.role)
    //   console.log('按钮权限', res)
    // },
    // 1.分配权限-按钮
    async btnPermission(row) {
      console.log('角色ID:', row.id)
      this.themId = row.id
      const res = await getPermsById(row.id)
      console.log('角色权限:', res)
      this.showPermissionDialog = true
      // TODO 数据回显 更具角色id 查权限id
      this.defauleKeys = res
    },
    //  弹层确认按钮
    async btnPermissionOK() {
      // 获取选中的权限id
      const permDatas = this.$refs.treeRef.getCheckedKeys()
      console.log('key', permDatas)

      // TODO 接口 提交数据 角色id defauleKeys
      await changePermsById(this.themId, permDatas)
      this.showPermissionDialog = false
      this.$message({
        message: '成功！',
        type: 'success'
      })
    },
    // 弹层取消按钮
    btnPermissionCancel() {
      this.showPermissionDialog = false
    },
    /**
     * 删除角色
     */
    async deleteRow(id) {
      console.log('id', id)
      await deleteRole(id)
      this.$message({
        type: 'success',
        message: '删除成功'
      })
    }

  }

}
</script>

<style></style>
